<script>

export default {
  name: "Autumn",
  data(){
    return{
      img: '',
      List:[],
      page: 0,
      onEnd: false
    }
  },
  onReachBottom() {
    if(this.onEnd) return
    this.page += 1
    this.getList()
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      this.$http('goods.getUniversalList',{
        themeFloorId: 552,
        pageSize: 10,
        current: this.page
      })
      .then(res=>{
        res.data.list.length > 10 ? this.onEnd = true : this.onEnd
        if(this.List.length == 0 ){
          this.List = res.data.list
          uni.setNavigationBarTitle({
            title: res.data.title
          })
          this.img = res.data.themeimg
        }else{
          this.List = this.List.concat(res.data.list)
        }
      })
    },
    toBuy(e){
      this.$Router.push({
        path: '/pages/goods/detail',
        query: {
          id: e,
        }
      })
    }
  }
}
</script>
 <template>
   <view style="background: #f0ede6">
     <view class="header-img">
       <image :src="img" mode="widthFix"></image>
     </view>
     <view class="bodys">
       <view v-for="item,index in List " :key="index" class="card">
         <view class="imgbox">
           <image :src="item.img" mode="widthFix"></image>
         </view>
         <view class="title">{{item.name}}}</view>
         <view class="buyCard">
           <view>
              <view class="titles">到手价</view>
              <view class="price">{{item.price}}</view>
           </view>
           <view class="buybox" @click="toBuy(item.id)">
             <view>
               <p>立即</p>
               <p>抢购</p>
             </view>
             <u-icon name="arrow-right" style="margin-left: 10rpx"></u-icon>
           </view>
         </view>
       </view>
     </view>
   </view>
 </template>

<style scoped lang="scss">
.header-img{
  width: 100%;
  image{
    width: 100%;
    height: 100%;
  }
}
.bodys{
  width: 100%;
  height: 100%;
  background: #f0ede6;
  padding: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .card{
    width: 342rpx;
    height: 555rpx;
    background: url("https://image.hzwltb69.com/app/date/2023/Autumn02.png") no-repeat;
    background-size: 100%;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 30rpx;
    .imgbox{
      width: 310rpx;
      height: 310rpx;
      //background: red;
      border-radius: 10rpx;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title{
      width: 300rpx;
      height: 45rpx;
      color: black;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 10rpx;
      margin-bottom: 10rpx;
    }
    .buyCard {
      width: 300rpx;
      height: 150rpx;
      background: url("https://image.hzwltb69.com/app/date/2023/Autumn03.png") no-repeat;
      background-size: 100%;
      border-radius: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rpx 30rpx 20rpx;
      color: #fff;

      .buybox {
        font-size: 20rpx;
        display: flex;
        justify-content: flex-start;
        padding-left: 20rpx;
        align-items: center;
        width: 100rpx;
        height: 80rpx;
        background: #ffe9ad;
        border-radius: 10rpx;
        color: #0b406c;
      }

      .titles {
        font-size: 20rpx;
        color: #ffe9ad;
      }

      .price {
        font-weight: 600;
        color: #ffe9ad;
        position: relative;
        left: 10rpx;
        font-size: 35rpx;
      }

      .price::after {
        content: '￥';
        font-size: 20rpx;
        position: absolute;
        left: -20rpx;
        bottom: 2rpx;
      }
    }
  }
}
</style>